<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>盘点页面</title>
		<!-- 引入Bootstrap CSS -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
		<link href="styles.css" rel="stylesheet">
	</head>
	<body>
		<!-- 页面内容 -->
		<div class="container">
			<h1 class="text-center">盘点</h1>
			<div class="scrollarea">
				<div class="table-container">
					<div class="row mb-2">
						<div class="col-4 fontSize">盘点单号：</div>
						<div class="col-8">
							<input type="text" class="form-control" id="inventoryNum" placeholder="">
						</div>
					</div>
					<div class="row mb-2">
						<div class="col-4 fontSize"> 公 司 ：</div>
						<div class="col-8">
							<input type="text" class="form-control" id="company" placeholder="" value="" disabled>
						</div>
					</div>
					<div class="row mb-2">
						<div class="col-4 fontSize"> 仓 库 ：</div>
						<div class="col-8">
							<input type="text" class="form-control" id="warehouse" placeholder="" value="" disabled>
						</div>
					</div>
					<div class="row mb-2 fontSize">
						<div class="col-4">盘点日期：</div>
						<div class="col-8">
							<input type="date" class="form-control" id="inventoryDate" placeholder="" disabled>
						</div>
					</div>
					<table class="table table-bordered">
						<thead class="table-header">
							<tr>
								<th>JTEKT型号</th>
								<th>客户型号</th>
								<th>背番号</th>
								<th>账面数量</th>
								<th>盘点数</th>
								<th>盘点差异</th>
							</tr>
						</thead>
						<tbody id="inventoryTableBody">
							<!-- 数据行将通过JavaScript动态插入 -->
						</tbody>
					</table>
					<div class="action-btn-group d-flex justify-content-between">
						<button class="btn btn-primary" id="searchBtn" style="width: 40%;">查询</button>
						<button class="btn btn-success" id="submitBtn" style="width: 40%;">提交</button>
					</div>
				</div>
				<!-- 模态框 -->
				<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel"
					aria-hidden="true">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title" id="detailModalLabel">详细信息</h5>
								<button type="button" class="btn-close" data-bs-dismiss="modal"
									aria-label="Close"></button>
							</div>
							<div class="modal-body">
								<div class="row mb-2">
									<div class="col-5 fontSize">JTEKT型号：</div>
									<div class="col-7">
										<input type="text" class="form-control" id="modalModel" placeholder="" disabled>
									</div>
								</div>
								<div class="row mb-2">
									<div class="col-5 fontSize">总盘点数：</div>
									<div class="col-7">
										<input type="number" class="form-control" id="modalCount" placeholder=""
											disabled>
									</div>
								</div>
								<table class="table table-bordered">
									<thead class="table-header">
										<tr>
											<th>箱数</th>
											<th>标准数量</th>
											<th>盘点数</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody id="boxTableBody">
										<!-- 数据行将通过JavaScript动态插入 -->
									</tbody>
								</table>
								<button type="button" class="btn btn-primary" id="addBoxBtn"
									style="width: 100%;">添加行</button>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-primary" id="confirmBtn">确认</button>
								<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 引入Bootstrap JavaScript -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
		<script src="script.js"></script>
	</body>
</html>